<template>
  <div class="tag-list">
    <el-tag v-for="(v, i) in list" :key="i" closable @close="$emit('del', i)">{{ v }}</el-tag>
    <button-input size="small" v-model="newTagValue" @change="onChangeOfButtonInput"></button-input>
  </div>
</template>

<script>
// @ --> /src
import ButtonInput from '@/components/ButtonInput.vue';
export default {
  name: 'TagList',
  components: { ButtonInput },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return { newTagValue: '' };
  },
  methods: {
    onChangeOfButtonInput(value) {
      value = value.trim();
      // 如果去掉前后空格后为空字符串，不能触发add事件
      if (value === '') {
        return;
      }
      this.$emit('add', value);
      this.newTagValue = '';
    },
  },
};
</script>

<style lang="less" scoped>
.tag-list {
  .el-tag {
    margin-right: 10px;
  }
}
</style>
